<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        TIP

        grayscale() 函数用于将图像转换为灰度图。

        值为 0% 或 0 则图像无变化。
        值为 100% 或 1 则完全转为灰度图像
        值在 0% 到 100% 之间，值越大，灰度越明显

        /* 将整个HTML文档转换为灰度图像 */
        html {
          -webkit-filter: grayscale(
            100%
          ); /* 针对WebKit内核的浏览器，如Chrome和Safari */
          -moz-filter: grayscale(100%); /* 针对Mozilla Firefox */
          -ms-filter: grayscale(100%); /* 针对旧版本的Internet Explorer */
          -o-filter: grayscale(100%); /* 针对Opera浏览器 */
        
          filter: grayscale(100%); /* 标准的CSS滤镜属性 */
        }
    -->

    <style>
        img {
          /* 正常无变化 
              filter: grayscale(0);*/
          /* 图片有一定灰度 
              filter: grayscale(0.5);*/
          /* 完全转换为灰度图像 */
          filter: grayscale(1);
        }
      </style>
      <img src="/src/img/css3/ms.jpg" />
</body>
</html>